/**
 * @file 添加文章-内容区域组件
 * @author wangshaozhi(wangshaozhi@baidu.com)
 */

import {ChangeEventHandler, useCallback} from "react";
import {observer} from "mobx-react";
import {Input} from "antd";
import {marked} from 'marked';
import highlight from 'highlight.js';
import {MainStore} from "../../../../../store/mainStore";

// style
import cls from './index.module.scss';

marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    pedantic: false,
    sanitize: false,
    breaks: false,
    smartypants: false,
    highlight: code => highlight.highlightAuto(code).value
});

interface IProps {
    store: MainStore;
}

export const Content: React.FC<IProps> = observer(({
    store
}) => {
    const {articleStore:{currOperateArticle}} = store;

    const onContentChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(e => {
        const content = e.target.value;
        currOperateArticle?.update({
            content
        })
    }, [currOperateArticle]);

    const onDescChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(e => {
        const introduction = e.target.value;
        currOperateArticle?.update({
            introduction
        });
    }, [currOperateArticle]);

    return (
        <div className={cls.wrapper}>
            <div className={cls.contentEditArea}>
                <h3>文章内容编辑</h3>
                <div className={cls.contentEdit}>
                    <Input.TextArea
                        className={cls.contentTextArea}
                        placeholder="请输入要发布的文章内容"
                        onChange={onContentChange}
                        value={currOperateArticle.content}
                    />
                    <div
                        className={cls.contentPreview}
                        dangerouslySetInnerHTML={{__html: marked.parse(currOperateArticle.content)}}
                    />
                </div>
            </div>
            <div className={cls.descEditAreaWrapper}>
                <h3>文章简介编辑</h3>
                <Input.TextArea
                    placeholder="请输入文章简介"
                    className={cls.descEditTextArea}
                    onChange={onDescChange}
                    value={currOperateArticle.introduction}
                />
                <div
                    className={cls.descPreview}
                    dangerouslySetInnerHTML={{__html: marked.parse(currOperateArticle.introduction)}}
                />
            </div>
        </div>
    );
})